<template>
  <scale-box class="daping">
    <div class="video-wrap">
      <video class="video" src="./image/background.mp4" autoplay muted loop></video>
    </div>
    <drawer ref="drawer" :visible.sync="drawerShow" title="统计指标配置" @change="onDrawerChange"></drawer>
    <div class="left-sider" @click="_siderClick">
      <img src="./image/index/left-sider-angle.png" />
    </div>
    <div class="title">
      <img src="./image/index/back.png" class="back" @click="onBack" />
      <span>
        {{projectTitle}}
        <img class="animate-img" src="./image/index/title-animate.png" />
      </span>
      <div class="date" @click="_removeLocalStorege">
        {{ dateTime }}<i></i><span>{{ time }}</span
        >星期{{ weekDay }}
      </div>
    </div>
    <div class="container" v-if="showContainer">
      <div class="left">
        <component class="left1" :is="option1.component" :title="option1.title" :data="option1.data"></component>
        <component class="left2" :is="option2.component" :title="option2.title" :data="option2.data"></component>
        <component class="left3" :is="option3.component" :title="option3.title" :data="option3.data"></component>
      </div>
      <div class="middle">
        <div class="num">
          <p>告警数据概况 <span>( 条 )</span></p>
          <p class="p1"><countTo :startVal="0" :endVal="countNum || 0" :duration="5000"></countTo></p>
        </div>

        <div class="map">
          <img class="left-img" src="./image/index/border-left.png" />
          <chart-map :data="mapData" :mapToolTips="mapToolTips" v-if="mapShow"></chart-map>
          <!-- <img class="ss-img" src="./image/index/ss.png" /> -->
          <span class="map-tooltips-box" @mouseout.stop="outMap">
            <img src="./image/index/ss.png" @mousemove.stop="overMap" />
            <div class="sansha-map" v-show="mapToolTips" v-if="ssMapData && Object.keys(ssMapData).length>0 && ssMapData.name">
              <div class="label">{{ssMapData.name}}-走私情报数据推送数</div>
              <div class="item">
                <span v-for="(obj, i) in ssMapData.labelValueDtoList" :key="i">
                  {{obj.label}}：{{obj.value}}/条
                </span>
              </div>
            </div>
          </span>
          <img class="right-img" src="./image/index/border-right.png" />
        </div>
        <div class="select" @mousemove.stop="selectShow = true" @mouseout.stop="selectShow = false">
          <div>
            <img src="./image/select-icon.png" alt="" />
            {{ selectTitle }}
          </div>
          <ul class="page-select" :class="{ open: selectShow }">
            <template v-for="(item, index) in pageSelect">
              <li :key="index" :class="{ active: keys === item.key }" @click="_setTitle(item.key)">
                {{item.label}}
              </li>
            </template>
          </ul>
        </div>
        <chartTable1
          v-if="keys === 1"
          class="bottom-table"
          title=""
          :data="listData"
          :more-data="moreData"
          @more-click="getMoreList"
          @more-change="getMoreList"
          :more-loading="moreLoading"
          :loading="tableLoading"
        ></chartTable1>
        <chartTable2
          v-else
          class="bottom-table"
          title=""
          :data="listData"
          :more-data="moreData"
          @more-click="getMoreList"
          @more-change="getMoreList"
          :more-loading="moreLoading"
          :loading="tableLoading"
        ></chartTable2>
      </div>
      <div class="right">
        <component class="right1" :is="option6.component" :title="option6.title" :data="option6.data"></component>
        <component class="right2" :is="option5.component" :title="option5.title" :data="option5.data"></component>
        <component class="right3" :is="option4.component" :title="option4.title" :data="option4.data"></component>
      </div>
    </div>
  </scale-box>
</template>

<script>
import moment from 'moment'

import card from './components/card'
import alarmCard from './components/alarm-card'
import chartTable1 from './components/table/index1.vue'
import chartTable2 from './components/table/index2.vue'
import chartLine from './components/chart-line'
import chartShadowLine from './components/chart-shadow-line'
import chartXBar from './components/chart-x-bar'
import chartYBar from './components/chart-y-bar'
import chartRosePie1 from './components/chart-rose-pie/index1.vue'
import chartRosePie2 from './components/chart-rose-pie/index2.vue'
import chartMap from './components/map'
import drawer from './components/drawer'
import dragOtion from './components/drawer/config/options.js'
import requestMethods from './methods/index.js'
import { smuUserList1, smuUserList2, getMapIndicators } from './api/index.js'
import countTo from 'vue-count-to'
// import censusCard from './components/census-card'
import scaleBox from './components/scale-box'
// import chartShadowSingleLine from './components/chart-shadow-singleLine'
// import chartPie from './components/chart-pie'
// import chartGroupPie from './components/chart-group-pie'
// import chartSpacialGroupPie from './components/chart-spacial-group-pie'
// import chartAroundPie from './components/chart-around-pie'

export default {
  name: 'App',
  components: {
    card,
    alarmCard,
    chartTable1,
    chartTable2,
    chartLine,
    chartShadowLine,
    chartXBar,
    chartYBar,
    chartRosePie1,
    chartRosePie2,
    chartMap,
    drawer,
    countTo,
    // censusCard,
    scaleBox,
    // chartShadowSingleLine,
    // chartPie,
    // chartGroupPie,
    // chartSpacialGroupPie,
    // chartAroundPie,
  },
  data() {
    return {
      projectTitle: process.env.VUE_APP_PLATFORM_NAME,
      dateTime: moment().format('YYYY-MM-DD'),
      time: moment().format('HH:mm:ss'),
      selectShow: false,
      pageSelect: [
        { key: 1, label: '告警动态数据' },
        { key: 2, label: '情报动态数据' }
      ],
      keys: 1,
      selectTitle: '告警动态数据',
      drawerShow: false,
      option1: {
        title: '',
        component: '',
        data: null,
      },
      option2: {
        title: '',
        component: '',
        data: null,
      },
      option3: {
        title: '',
        component: '',
        data: null,
      },
      option4: {
        title: '',
        component: '',
        data: null,
      },
      option5: {
        title: '',
        component: '',
        data: null,
      },
      option6: {
        title: '',
        component: '',
        data: null,
      },

      listData: [],
      mapData: [],
      mapShow: true,

      moreData: {
        records: [],
        total: 0,
      },
      moreSearch: {
        district: '',
        pageNo: 1,
        pageSize: 5,
      },
      tableLoading: true,
      moreLoading: true,

      showContainer: false,
      dateTimer: null,
      bottomTimer: null,
      countNum: 0,
      mapToolTips: false,
      ssMapData: {}
    }
  },
  mounted() {
    this._setTime()
    setTimeout(() => {
      this.showContainer = true
      this.onInit()
      this.getBottomList()
      this.getMapData()
      this.bottomTimer = setInterval(() => {
        this.getBottomList()
      }, 30000)
    }, 1000)
  },
  beforeDestroy() {
    this._clearTimer()
  },
  computed: {
    weekDay: function () {
      const map = { 1: '一', 2: '二', 3: '三', 4: '四', 5: '五', 6: '六', 7: '日', }
      return map[moment().weekday() + 1]
    },
  },
  methods: {
    _clearTimer() {
      clearInterval(this.dateTimer)
      clearInterval(this.bottomTimer)
    },
    _removeLocalStorege() {
      localStorage.removeItem('dragOtion')
    },
    onBack() {
      this.$router.replace('/')
    },
    _setTime() {
      this.dateTimer = setInterval(() => {
        this.time = moment().format('HH:mm:ss')
      }, 1000)
    },
    _siderClick() {
      this.drawerShow = true
    },
    async onDrawerChange(params) {
      this.showContainer = false
      this.$nextTick(() => {
        this.showContainer = true
        this.onInit()
        this.getBottomList()
        this.getMapData()
      })
    },
    _setTitle(key) {
      let item = this.pageSelect.find(v=> {return v.key == key})
			this.keys = key;
			this.selectTitle = item && Object.keys(item).length>0 && item.label ? item.label: null;
      this.getBottomList()
    },
    onInit() {
      const option = this.$refs.drawer.getOption()
      const dragOtionCache = localStorage.getItem('dragOtion')
      const dragOtionList = dragOtionCache ? JSON.parse(dragOtionCache) : dragOtion

      const dragMap = {}
      dragOtionList.map((item) => {
        dragMap[item.label] = item
      })
      const { checkedList } = option
      // 基础选中列表
      const checkedMap = {}
      const defaultChecked = []
      checkedList.map((item) => {
        checkedMap[item] = item
      })
      dragOtionList.map((item) => {
        if (checkedMap[item.label]) {
          defaultChecked.push(item.label)
        }
      })

      // 排除预警、案件列表
      const sortCheckedList = defaultChecked.filter((item) => {
        return item !== '反走私情报数据概览' && item !== '告警类型概况'
      })
      // 预警、案件列表
      const cardChecked = defaultChecked.filter((item) => {
        return item === '反走私情报数据概览' || item === '告警类型概况'
      })
      console.log('sortCheckedList')
      console.log(sortCheckedList)
      // console.log('cardChecked')
      // console.log(cardChecked)
      if (cardChecked.length > 0) {
        cardChecked.map((item, index) => {
          if (index === 0) {
            sortCheckedList.unshift(item)
          } else {
            sortCheckedList.push(item)
          }
        })
      }
      sortCheckedList.map(async (item, index) => {
        const key = 'option' + (index + 1)
        this[key].title = item
        this[key].component = dragMap[item].component
        const method = requestMethods[item]
        const data = await method(option)
        this[key].data = data
        // console.log(this[key].component)
      })
    },

    getMapData() {
      this.mapData = []
      const option = this.$refs.drawer.getOption()
      const params = {
        endTime: option.endDate,
        startTime: option.startDate,
        timeType: option.dateType
      }
      getMapIndicators(params).then((res) => {
        const { result } = res
        let data = []
        let data1 = []
        if (result && result.length) {
          result.forEach((item) => {
            let total = this.countTotal(item.labelValueDtoList, 'value')  //计算每个地区的总数
            let num = total> 14? 14: total
            data.push({
              name: item.fullName,
              value: num,
              total: total,
              labelValueDtoList: item.labelValueDtoList
            })
          })
          data1 = data.filter(item => item.name !== '三沙市' )
          this.ssMapData = data.find(obj=> {return obj.name === '三沙市'})//data.filter(item=> item.name === '三沙市')
          this.countNum = this.countTotal(data, 'total') // 计算所有地区的总数
        }
        this.$nextTick(() => {
          this.mapData = data1
        })
      })
    },
    getBottomList() {
      this.tableLoading = true
      const option = this.$refs.drawer.getOption()
      const params1 = {
        alarmEndTime: option.endDate,
        alarmStartTime: option.startDate,
        alarmTimeType: option.dateType,
        pageNo: 1,
        pageSize: 6,
      }
      const params2 = {
        pushEnd: option.endDate,
        pushStart: option.startDate,
        pushType: option.dateType,
        pageNo: 1,
        pageSize: 6
      }
      let api = this.keys===1? smuUserList1(params1): smuUserList2(params2)
      let field = this.keys===1?'warningTime': 'publishedTime'
      this.listData = []
      api.then((res) => {
        const result = res.result.records || []
        if(this.listData.length === 0) {
          this.listData = result
        } else {
          let newList = []
          
          result.map((item, index) => {
            let newItem = moment(item[field]).unix()
            let oldFirst = moment(this.listData[0][field]).unix()
            if (newItem > oldFirst) {
              newList.unshift(item)
            }
          })
          for (let i = 0; i < newList.length; i++) {
            setTimeout(() => {
              this.listData.splice(-1, 1)
              this.listData.unshift(newList[i])
            }, (i + 1) * 500)
          }
        }
        this.tableLoading = false
      }).catch((e) => {
        this.tableLoading = false
      })
    },
    getMoreList(page = 1) {
      this.moreLoading = true
      const option = this.$refs.drawer.getOption()
      // const search = {
      //   // endTime: option.endDate,
      //   // startTime: option.startDate,
      //   // timeType: 2, //option.dateType,
      // }
      // const params = {
      //   ...search,
      //   ...this.moreSearch,
      // }
      // params.pageNo = page
      const params1 = {
        alarmEndTime: option.endDate,
        alarmStartTime: option.startDate,
        alarmTimeType: option.dateType,
        ...this.moreSearch,
      }
      params1.pageNo = page
      const params2 = {
        pushEnd: option.endDate,
        pushStart: option.startDate,
        pushType: option.dateType,
        ...this.moreSearch,
      }
      params2.pageNo = page

      this.moreData = {}
      let api = this.keys===1? smuUserList1(params1): smuUserList2(params2)
      api.then((res) => {
        const { result } = res
        this.moreData = result
        this.moreLoading = false
      }).catch((e) => {
        this.moreLoading = false
      })
    },
    //计算对象数组中某个属性合计
    countTotal(arr, keyName) {
      let $total = 0;
      $total = arr.reduce(function (total, currentValue, currentIndex, arr){
          return currentValue[keyName] ? (total + currentValue[keyName]) : total;
      }, 0);
      return $total;
    },
    overMap() {
      this.mapToolTips = true
    },
    outMap() {
      this.mapToolTips = false
    }
  },
}
</script>
<style type="text/css">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@keyframes fadeToLeft {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeToRight {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.left-img {
  position: absolute;
  top: 10%;
  left: 0;
  height: 80%;
  animation: fadeToLeft 1s 2;
  pointer-events: none;
}

.right-img {
  position: absolute;
  top: 10%;
  right: 0;
  height: 80%;
  animation: fadeToRight 1s 2;
  pointer-events: none;
}
</style>
<style lang="less" scoped>
@font-face {
  font-family: 'pang';
  src: url(font/PangMenZhengDaoBiaoTiTi-1.ttf);
}
@font-face {
  font-family: 'AGENCYFB';
  src: url(font/AGENCYFB.TTF);
}

@keyframes opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes imgMove {
  0% {
    left: -45%;
  }
  50% {
    left: 50%;
  }
  100% {
    left: -45%;
  }
}
@keyframes leftMove {
  0% {
    margin-left: -120%;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes rightMove {
  0% {
    margin-left: 120%;
  }
  100% {
    margin-left: 0;
  }
}
@keyframes Glow {
    from {
        text-shadow: 0 0 2px #fff,
                     0 0 4px #fff,
                     0 0 6px #fff,
                     0 0 8px #7ba9f6,
                     0 0 10px #7ba9f6,
                     0 0 12px #7ba9f6,
                     0 0 14px #7ba9f6,
                     0 0 16px #7ba9f6;
    }
    to {
        text-shadow: 0 0 1px #fff,
                     0 0 2px #fff,
                     0 0 3px #fff,
                     0 0 4px #7ba9f6,
                     0 0 5px #7ba9f6,
                     0 0 6px #7ba9f6,
                     0 0 7px #7ba9f6,
                     0 0 8px #7ba9f6;
    }
}
.daping {
  overflow: hidden;
  // font-family: 'pang';
  display: flex;
  flex-flow: column;
  min-width: 1200px;
  min-height: 600px;

  .video-wrap {
    width: 100%;

    position: absolute;

    // padding-bottom: 56.25%;
    /*9除以16*/

    height: 100vh;

    .video {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      // z-index: 9999;
      object-fit: fill;
    }
  }

  .left-sider {
    width: 30px;
    height: 450px;
    position: fixed;
    left: 0;
    top: calc(50% - 225px);
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(image/index/left-sider.png);
    background-size: 100% 100%;
    cursor: pointer;
    z-index: 8;
  }

  .title {
    animation: 5s opacity 0s linear;
    height: 70px;
    line-height: 70px;
    background-image: url(image/index/title.png);
    background-size: 100% 100%;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    padding: 0 60px;
    padding-left: 40px;
    z-index: 0;

    .back {
      width: 32px;
      height: 32px;
      margin-top: 6px;
      cursor: pointer;
    }

    > span {
      font-size: 36px;
      font-family: 'pang';
      // background: linear-gradient(0deg, #cdddf9 0%, #ffffff 100%);
      // -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
      margin-left: 245px;
      position: relative;
      color: #f9fcff;
      // font-style: 'SourceHanSansCN-Bold';
      letter-spacing: 3px;
      text-shadow: .2rem 0rem .5rem #0068b9,
                    -.2rem 0rem .5rem #0068b9,
                    0rem .2rem .5rem #0068b9,
                    0rem -.2rem .5rem #0068b9;
      // animation: Glow 3.5s ease infinite alternate;
      .animate-img {
        animation: 6s imgMove 0s infinite;
        position: absolute;
        bottom: -38%;
        width: 100%;
        left: 0;
      }
    }

    > div {
      display: flex;
      align-items: center;
      font-size: 18px;

      i {
        display: block;
        width: 1px;
        height: 22px;
        background: linear-gradient(0deg, #000, #fff, #000);
        margin: 0 23px;
      }
    }

    .date {
      height: 100%;
      font-family: 'pang';
      span {
        display: block;
        width: 95px;
      }
    }
  }

  .container {
    animation: 5s opacity 0s linear;
    position: relative;
    flex: 1;
    padding: 20px;
    padding-bottom: 22px;
    display: flex;
    flex-flow: row;

    .left,
    .right {
      // min-width: 380px;
      width: 22.92%;
      min-height: 100%;
      display: flex;
      flex-flow: column;
      justify-content: space-between;

      > div {
        height: 28.8vh !important;
        // min-height: 240px!important;
      }
    }

    .middle {
      flex: 1;
      margin: 0 30px;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      position: relative;
      .bottom-table {
        height: 296px !important;
        height: 28.8vh !important;
      }
      .num {
        font-family: 'MicrosoftYaHei';
        position: absolute;
        left: 2vh;
        top: 0vh;
        color: #00cbff;
        font-size: 1.8vh;
        p {
          margin-bottom: 0.5vh;
        }
        span {
          color: #fff;
          font-size: 1.5vh;
        }
        .p1 span {
          font-size: 3.5vh;
          // font-family: 'Square721BT-Roman';
          font-family: 'pang';
        }
      }
      .map {
        flex: 1;
        position: relative;
      }
    }

    .left {
      .left1 {
        animation: 1s leftMove linear;
      }
      .left2 {
        animation: 1.5s leftMove linear;
      }
      .left3 {
        animation: 2s leftMove linear;
      }
    }
    .right {
      .right1 {
        animation: 1s rightMove linear;
      }
      .right2 {
        animation: 1.5s rightMove linear;
      }
      .right3 {
        animation: 2s rightMove linear;
      }
    }
  }
}
.select {
  position: absolute;
  bottom: 23.4vh;
  left: 3vh;
  z-index: 2;
  width: 20.555vh;
  min-width: 110px;
  height: 3.888vh;
  margin-right: 1.851vh;
  // background-image: url(./image/select-wrap.png);
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
  // position: relative;
  .open {
    height: auto;
    padding: 0.926vh 0;
  }

  > div {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8vh;
    cursor: pointer;

    img {
      width: 1.851vh;
      height: 1.388vh;
      margin-right: 1.388vh;
    }
  }

  > ul {
    // transition: all .5s;
    position: absolute;
    top: 0;
    top: 3.888vh;
    width: 100%;
    background-color: #00ecff;
    z-index: 999;
    height: 0;
    overflow: hidden;

    .active {
      background-color: #f4cd28;
      font-weight: bold;
      cursor: pointer;
    }

    li {
      height: 2.777vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8vh;

      &:hover {
        background-color: #f4cd28;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}

/* -----------地图-三沙市鼠标经过效果---------- */
.map-tooltips-box {
  position: absolute;
  top: 72%;
  right: 2.4%;
  // width: 10vh !important;
  // display: inline;
  z-index: 9;
  width: 10vh;
  img {
    width: 100%;
  }
  .sansha-map {
    top: -100%;
    left: -490%;
    position: absolute;
  }
}

.sansha-map {
  font-family: 'MicrosoftYaHei-Bold';
  width: 50vh;
  // height: 22vh;
  background-image: url(./components/map/image/tooltips-wrap.png);
  background-size: 100% 100%;
  padding-top: 0.926vh;
  padding-bottom: 3vh;
  font-size: 1.48148vh;
  position: relative;
  color: #fff;
  .label {
    width: 90%;
    height: 3.7vh;
    margin: 2.47vh;
    padding-left: 1.777vh;
    line-height: 3.7vh;
    background-image: url(./components/map/image/title.png);
    background-size: 100% 100%;
    font-size: 1.8vh;
  }
  .more {
    width: 5.5vh;
    position: absolute;
    right: 3vh;
    top: 4vh;
    border: 1px solid #fff;
    border-radius: 5px;
    color: #fff;
    font-family: 'MicrosoftYaHei';
    padding: 0 5px;
    font-size: 1.5vh;
    .triangle {
      display: block;
      width: 0;
      height: 0;
      border-width: 5px 0 5px 5px;
      border-style: solid;
      border-color: transparent transparent transparent #fff; /*透明 透明 透明 黄*/
      position: absolute;
      top: 5px;
      left: 4vh;
    }
    cursor: pointer;
  }
  .item {
    width: 100%;
    padding-left: 4.5vh;
    margin-bottom: 1.2vh;
    font-size: 1.8vh;
    overflow: hidden;
    span {
      float: left;
      width: 50%;
      margin-bottom: 1.2vh;
      overflow: hidden;
    }
  }
}
</style>
